<template>
    <div class = "personalInformation">
        <!--个人详细信息-->
        <div class = "personalInformation_content">
            <van-cell title = "头像" is-link>
                <img v-if="userInfo.pic==null" src="../../../static/images/user-portrait.png" style = "width: 4.4rem;height: 4.4rem;border-radius: 50%;margin-top: 1rem">
                <img v-else :src = userInfo.pic style = "width: 4.4rem;height: 4.4rem;border-radius: 50%;margin-top: 1rem">
            </van-cell>
            <van-cell title="昵称" is-link :value="userInfo.name" />
            <van-cell title="手机号" is-link :value="userInfo.phone" />
            <van-cell title = "绑定其他账号" is-link :value = userInfo.zhicheng @click="$router.push('/public/bindotherwechat')" />
        </div>
        <!--存放点信息-->
        <div class = "personalInformation_store">
            <van-cell title="暂存点" is-link :value="userInfo.tempname" />
            <van-cell title="暂存点位置" is-link :value="userInfo.tempaddress" />
        </div>
    </div>
</template>

<script>
    import {Field} from 'vant';
    import {Cell, CellGroup} from 'vant';

    export default {
        name: "personalInformation",
        components: {[Field.name]: Field, [Cell.name]: Cell},
        data() {
            return {}
        },
        computed: {
            userInfo() {
                // console.log(this.$store.state.options.user.oda);
                return this.$store.state.options.user.oda;
            }
        }
    }
</script>

<style scoped lang = "scss">
    .personalInformation {
        /*个人详细信息*/
        .personalInformation_content {

        }

        /*存放点信息*/
        .personalInformation_store {
            width: 100%;
            border-top: .5rem solid #EEEEEE;

            .van-cell {
                &:nth-child(1) {
                    .van-cell__value {
                        line-height: normal;

                        span {
                            font-size: 1.7rem;
                            color: #333333;
                            font-weight: 500;
                        }
                    }
                }

                &:nth-child(2) {
                    .van-cell__value {
                        line-height: normal;

                        span {
                            font-size: 1rem;
                            color: #333333;
                            font-weight: 500;
                        }
                    }
                }

                &:after {
                    position: absolute;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    content: ' ';
                    pointer-events: none;
                    right: 0;
                    bottom: 0;
                    left: 16px;
                    border-bottom: 1px solid #ebedf0;
                    -webkit-transform: scaleY(.5);
                    -ms-transform: scaleY(.5);
                    transform: scaleY(.5);
                }
            }
        }
    }
</style>
